<template>
  <el-dialog :title="id?'编辑角色':'添加角色'" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="modelRules" :model="model" label-width="100px">
      <!-- <el-form-item v-if="id" label="角色">
        <span>{{ model.name }}</span>
      </el-form-item> -->
      <el-form-item label="角色" prop="name">
        <el-input v-model="model.name" placeholder="角色" />
      </el-form-item>
      <!-- <el-form-item label="角色显示名称" prop="extraProperties.DisplayName">
        <el-input v-model="model.extraProperties.DisplayName" placeholder="角色显示名称" />
      </el-form-item> -->
      <!-- <el-form-item label="描述" prop="extraProperties.Description">
        <el-input v-model="model.extraProperties.Description" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="描述" />
      </el-form-item> -->
      <!-- <el-form-item prop="isDefault">
        <el-checkbox v-model="model.isDefault">默认角色</el-checkbox>
      </el-form-item> -->
      <!-- <el-form-item prop="isPublic">
        <el-checkbox v-model="model.isPublic">公开</el-checkbox>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getRole, createRole, updateRole } from "@/api/identity/role";

export default {
  data() {
    return {
      dialogVisible: false,
      isSubmitLoading: false,
      id: undefined,
      model: {
        name: ""
      },
      modelRules: {
        name: [{ required: true, trigger: "blur", message: "请输入角色名" }]
      }
    };
  },
  methods: {
    show(id) {
      this.id = id;
      this.resetModal();
      this.isSubmitLoading = false;
      if (this.id) {
        getRole(this.id).then(result => {
          this.model = result;
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].clearValidate();
          });
        });
      } else {
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      }
    },
    resetModal() {
      this.model = {
        name: ""
      };
    },
    save() {
      this.isSubmitLoading = true;
      this.$refs["dataForm"].validate(valid => {
        if (!valid) {
          this.isSubmitLoading = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
          return;
        }

        const data = this.model;
        let obj;
        if (this.id) {
          obj = updateRole(this.id, data);
        } else {
          obj = createRole(data);
        }
        obj.then((result) => {
          this.$message({ message: this.id ? "编辑成功" : "添加成功", type: "success" });
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          this.close();
          this.$emit("save");
        }).finally(() => {
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        })
      });
    },
    close() {
      this.dialogVisible = false;
      this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
    }
  }
};
</script>
